<div class="layui-row layui-col-space15 layui-form-item layui-form-text">
    <div class="layui-col-md12">
        <label for="L_title" class="layui-form-label">{{ $lable??'图集' }}</label>
        <div class="layui-input-block">
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 0px;">
                <div class="layui-upload-list" id="demo2">
                    <div id="drag_sort">


                    @forelse($val as $item)
                        <div class="imgs_group drag_sort" id="upload-1587450791816-0">
                            <div class="imgs_group_header layui-btn-group">
                                <button type="button" class="reload" title="重传"><i class="iconfont icon-zhongchuan"></i></button>
                                <button type="button" class="delete" title="删除"><i class="iconfont icon-shanchu"></i></button>
                            </div>
                            <div class="imgs_group_central">
                                <span style="color: red">上传失败</span>
                            </div>
                            <div class="imgs_group_buttom @if($checked!=$item) hide @endif" style="">
                                <button type="button" class="cover" title="设为封面">设为封面</button>
                            </div>
                            <img src="{{$item}}" class="imgs_group_img ">
                            <input type="hidden" name="imgs[]" class="@if(isset($checked)&&$item==$checked) cover_img @endif" value="{{$item}}">
                        </div>
                        @empty

                    @endforelse

                    </div>
                    <div alt="" class="upload" id="image_add">
                        <i class="iconfont icon-shangchuantupian1"></i>
                        <p>点击添加图片</p>
                    </div>
                    <input type="hidden" name="cover" value=""/>

                    <input class="layui-upload-file" type="file" accept="undefined" name="image" multiple="">
                    <blockquote class="layui-elem-quote" style="clear: both">
                        <button class="layui-btn layui-btn-sm" type="button" id="image_upload">开始上传</button>
                        请勿上传违反中国大陆和香港法律的图片，违者后果自负
                    </blockquote>
                </div>
            </blockquote>
        </div>
    </div>
</div>


@section('css')
    @parent
    <style>
    .upload{float:left;margin:10px;width:125px;height:165px;text-align:center;color:#999;font-size:14px;background-color:#f9f9f9;background-position:center 20%;background-repeat:no-repeat;border:1px dashed #e2e2e2;border-radius:2px;}
    .imgs_group{float:left;position: relative;width:125px;height:165px;margin: 10px;overflow: hidden;background: rgba(0,0,0,0.2);text-align: center;line-height: 165px;}
    .imgs_group .imgs_group_header{z-index: 3;display: none;background:rgba(0,0,0,0.8);position: absolute;left:0;line-height: normal;height:25px;width:100%;text-align: right}
    .imgs_group .imgs_group_header button{cursor:pointer;font-size: 14px;background:rgba(0,0,0,0);color:#fff;border:0;width: 25px;height: 25px;}

    .imgs_group .imgs_group_central{display: none;z-index:2;background:rgba(0,0,0,0.6);position: absolute;width: 100%;width: 100%;color: #fff;}
    .imgs_group .imgs_group_progress{position:relative;z-index:2;background:rgba(0,0,0,0.6);position:absolute;width:100%;height:100%;color:#fff;}

    .imgs_group .imgs_group_buttom{top:100%;margin-top: -25px;z-index: 3;background:rgba(0,0,0,0.8);position: absolute;left:0;line-height: normal;height:25px;width:100%;text-align: center}
    .imgs_group .imgs_group_buttom button{font-size: 14px;color: #fff;line-height: 25px;text-align: center;cursor:pointer;font-size: 14px;background:rgba(0,0,0,0);color:#fff;border:0;}
    .imgs_group button:hover{color: #999}
    .imgs_group .show{display: inline-block}
    .imgs_group .hide{display: none}
    .imgs_group_img{max-width:125px;_width:expression(this.width > 125 ? "auto" : this.width);}
    .imgs_group:hover img{webkit-transform:scale(2);-moz-transform:scale(2);-o-transform:scale(2);-ms-transform:scale(2);transform:scale(2); }
    .imgs_group:hover .imgs_group_header{display: inline-block}
    .imgs_group:hover .imgs_group_buttom{display: inline-block}
</style>
@endsection
<script src="{{asset('asset/lib/extend/drag/Sortable.min.js')}}"></script>
<script>
    // 排序
    var container = document.getElementById("drag_sort");
    var sort = Sortable.create(container, {
        animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
        handle: ".drag_sort", // Restricts sort start click/touch to the specified element
        draggable: ".drag_sort", // Specifies which items inside the element should be sortable
        onUpdate: function (evt/**Event*/){
            var item = evt.item; // the current dragged HTMLElement
        }
    });

</script>
<script>
    layui.use(['upload','element'],function() {
        var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element;


        //多文件列表示例
        var demoListView = $('#drag_sort')
            ,uploadListIns = upload.render({
            elem: '#image_add'
            ,url: '/upload/image'
            ,accept: 'images'
            ,multiple: true
            ,acceptMime: 'image/*'
            ,auto: false
            ,bindAction: '#image_upload' //指向上传按钮
            ,choose: function(obj){
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function(index, file, result){
                    var html = $(['<div class="imgs_group drag_sort" id="upload-'+ index +'">',
                        '<div class="imgs_group_header layui-btn-group">',
                        '<button type="button" class="reload" title="重传"><i class="iconfont icon-zhongchuan"></i></button>',
                        '<button type="button" class="delete" title="删除"><i class="iconfont icon-shanchu"></i></button>',
                        '</div>',

                        '<div class="imgs_group_central"><span style="color: red">上传失败</span></div>',

                        // '<div class="imgs_group_progress">',
                        // '<div class="layui-progress" lay-showPercent="yes">',
                        // '<div class="layui-progress-bar layui-bg-red" lay-filter="progress" lay-percent="30%"></div>',
                        // '</div>',
                        // '</div>',


                        '<div class="imgs_group_buttom hide" style="">',
                        '<button type="button" class="cover" title="设为封面">设为封面</button>',
                        '</div>',
                        '<img src="'+ result +'" alt="'+ result +'" class="imgs_group_img">',
                        '<input type="hidden" name="imgs[]" class="" value="">',

                        '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>',
                        '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',
                        '</td>',
                        '</div>'].join(''));

                    demoListView.append(html);

                    //单个重传
                    html.find('.reload').on('click', function(){
                        obj.upload(index, file);
                    });

                    //删除
                    html.find('.delete').on('click', function(){
                        delete files[index]; //删除对应的文件
                        html.remove();
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    });

                    //设置封面
                    html.find('.imgs_group_buttom').on('click',function(){
                        $('.imgs_group_buttom').removeClass('show');
                        $('.imgs_group_buttom').addClass('hide');
                        $('.imgs_group_buttom').find('button').attr('title','设为封面');
                        $('.imgs_group_buttom').find('button').text('设为封面')
                        $(this).removeClass('hide');
                        $(this).addClass('show');

                        $("input[name='imgs[]']").removeClass('cover_img');
                        $(html.find('input').addClass('cover_img'));

                        $(this).find('button').attr('title','封面');
                        $(this).find('button').text('封面');
                    })

                });
            }
            ,progress: function(n){
                var percent = n + '%' //获取进度百分比
                element.progress('progress', percent); //可配合 layui 进度条元素使用
            }
            ,done: function(res, index, upload){
                if(res.code == 0){ //上传成功
                    var html = demoListView.find('div#upload-'+ index);
                    html.find('.imgs_group_central').html('<span style="color:green">上传成功</span>');
                    html.find('.imgs_group_central').show();

                    html.find('.imgs_group_img').attr('src',res.data.src);
                    html.find('.imgs_group_img').attr('alt',res.data.src);
                    html.find('input').val(res.data.src);

                    return delete this.files[index]; //删除文件队列已经上传成功的文件
                }
                this.error(index, upload);
            }
            ,error: function(index, upload){
                var html = demoListView.find('tr#upload-'+ index)
                    // ,tds = tr.children();
                html.find('.imgs_group_central').html('<span style="color:red">上传失败</span>');
                html.find('.imgs_group_central').show();
            }
        });
    })
</script>